<template>
  <div>
    <!--搜索栏-->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-input v-model="searchModel.name" placeholder="请输入申请人姓名" clearable />
          <el-button type="primary" round icon="el-icon-search" @click="getExpenseList">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!--结果，分页-->
    <el-card>
      <template>
        <el-table :data="expenseList" stripe style="width: 100%">
          <el-table-column prop="id" label="序号" width="180" />
          <el-table-column prop="userName" label="申请人姓名" width="180" />
          <el-table-column prop="date1" label="申请时间" width="180" />
          <el-table-column prop="cost" label="报销花费" width="180" />
          <el-table-column prop="illustrate" label="用途明细" width="180" />
          <el-table-column prop="statusFinance" label="财务审批进程" width="180">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.statusFinance == 1" type="info">待审批</el-tag>
              <el-tag v-else-if="scope.row.statusFinance == 2" type="success">已通过</el-tag>
              <el-tag v-else type="danger">驳回</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="statusAdmin" label="管理员审批进程" width="180">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.statusAdmin == 1" type="info">待审批</el-tag>
              <el-tag v-else-if="scope.row.statusAdmin == 2" type="success">已通过</el-tag>
              <el-tag v-else type="danger">驳回</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-check" size="mini" circle @click="pass(scope.row.id,2,scope.row.statusFinance)" />
              <el-button type="danger" icon="el-icon-close" size="mini" circle @click="noPass(scope.row.id,3,scope.row.statusFinance)" />
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="备注" />
        </el-table>
      </template>
    </el-card>
    <!--分页组件-->
    <el-card>
      <el-pagination
        :current-page="searchModel.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="searchModel.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import expenseApi from '@/api/expense'

export default {
  data() {
    return {
      formLabelWidth: '130px',
      dialogFormVisible: false,
      date: '',
      title: '',
      total: 0,
      searchModel: {
        page: 1,
        pageSize: 10
      },
      expenseList: []
    }
  },
  created() {
    this.getExpenseList()
  },
  methods: {
    pass(id, statusFinance, statusDetermine) {
      if (statusDetermine === 1) {
        this.$confirm('确定通过该条目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          expenseApi.updateExpenseById(params).then(res => {
            this.$message({
              type: 'success',
              message: '已通过该条目'
            })
          })
          this.getExpenseList()
        })
        const params = {
          statusFinance,
          id
        }
      } else {
        this.$message({
          type: 'error',
          message: '该条目已审核过，无法修改'
        })
      }
    },
    noPass(id, statusFinance, statusDetermine) {
      if (statusDetermine === 1) {
        this.$confirm('确定驳回该条目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          expenseApi.updateExpenseById(params).then(res => {
            this.$message({
              type: 'error',
              message: '已驳回该条目'
            })
          })
          this.getExpenseList()
        })
        const params = {
          statusFinance,
          id
        }
      } else {
        this.$message({
          type: 'error',
          message: '该条目已审核过，无法修改'
        })
      }
    },
    clearForm() {
      this.expenseForm = {}
      this.$refs.expenseForm.clearValidate()
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getExpenseList()
    },
    handleCurrentChange(page) {
      this.searchModel.page = page
      this.getExpenseList()
    },
    getExpenseList() {
      expenseApi.getExpenseList(this.searchModel).then(res => {
        this.expenseList = res.data.rows
        this.total = res.data.total
      })
    }
  }
}
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}
</style>
